<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示模式、标签显示模式转换</title>

    <style>
        .div1 {
            background-color: #ea29ff;
            width: 100px;
            height: 100px;
            display: inline; /*将盒子模型转换为行内元素，宽高失效不独占一行*/
        }

        span {
            background-color: #00FF00;
            width: 60px;
            height: 30px;
            display: block;
        }

        .input1 {
            width: 100px;
            height: 100px;
        }

        .a1 {
            background-color: orange;
            width: 50px;
            height: 50px;
            display: inline-block;
        }

        /*导航案例*/
        .nav a {
            /*让a元素即不独占一行，还支持宽高*/
            display: inline-block;
            width: 120px;
            height: 50px;
            text-align: center;
            text-decoration: none;
            color: #FFF;
            line-height: 50px; /*行高等于盒子的高度，可以让单行文本垂直居中对齐*/
            background-image: url(../image/navbg.png);
        }

        .nav a:hover {
            background-image: url(../image/navbgc.png);
            color: #00FF00;
        }

        .nav {
            text-align: center;
        }

        /*测试text-align*/
        .tac {
            text-align: center;
        }

        .tac p {
            display: inline-block;
            width: 140px;
            color: orange;
            background: blue;
        }

    </style>
</head>
<body>

<h2>导航案例</h2>
<!--行内元素、行内块元素可以看做文本，因为text-align是让盒子中文本对齐而不是元素-->
<div class="nav">
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
    <a href="#">网站导航</a>
</div>

<hr>
<!--text-align通常会让文本对齐(也包括行内、行内块元素)-->
<!--p为块级元素，但是p继承了div的text-align属性也会对齐，但是如果为p设置宽高对齐方式则失效，解决办法将p变为行内元素-->
<div class="tac">
    <p>我是文本</p>
</div>

<h2>元素显示模式、标签显示模式转换</h2>
<!--块级元素 独占一行有宽高 h1-h6 p div ul ol li-->
<div class="div1">我是块级div</div>
<div class="div1">我是块级div</div>
<!--行内元素：高 宽无效，通常其子元素只能为行内元素，例如：a strong b em i del s ins u span等-->
<span class="span1">span1</span>
<span>span2</span>
<span>span3</span>
<a href="#" class="a1">超链接</a>
<a href="#" class="a1">超链接</a>
<!--行内块，行内元素中有几个特殊元素：img、input、td 不独占一行，而且有宽高属性-->
<!--行内块元素之间有空隙-->
<input type="text" class="input1">
<input type="text" class="input1">
</body>
</html>